<template>
  <div class>
    <header :style="'background-color:'+$store.state.color">
      <span></span>
      <h2>学习记事本</h2>
      <span @click="s">-</span>
    </header>
    <van-popup v-model="show" position="left" :style="{ height: '20%' }">
      <p v-show="num==true">
        <button @click="zhuti">主题</button>
      </p>
      <p v-show="num==false">
        <button @click="red">red</button>
        <br />
        <button @click="pink">pink</button>
        <br />
        <button @click="yellowgreen">yellowgreen</button>
      </p>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      num:true
    };
  },
  mounted() {},
  methods: {
    s() {
      this.show = true;
    },
    zhuti(){
        this.num=false
    },
    red(){
        this.$store.commit('red','red')
    },
    pink(){
        this.$store.commit('pink','pink')
    },
    yellowgreen(){
        this.$store.commit('yellowgreen','yellowgreen')
    }
  }
};
</script>

<style lang='scss' scoped>
header {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-color: rgb(0, 0, 0);
  color: white;
  display: flex;
  justify-content: space-around;
}
</style>
